
<template>
  <div class="video_box">
    <video
      ref="videoPlayer"
      class="video-js"
      poster=""
      @playing="saveTimes"
      @timeupdate="vidPlay"
      @pause="endSave"
      @ended="finishCourse"
      @contextmenu.prevent="videoMenu"
      @seeking="seeking"
    >
      <source
        src="https://cdn.yingcaibang.cn/茶艺师疫情防疫/20200214_e00835c4-b36b-4a5b-ad30-98037e3e26b5.mp4"
        type="video/mp4"
      >
    </video>
    <img style="width:100%;height: 510px" src="@/assets/img1.png" alt="">
  </div>
</template>

<script>
export default {
  name: 'VideoPlayer',
  data() {
    return {
      player: null,
      timeer: 'asasasasa'
    }
  },
  mounted() {
    // 播放参数
    const options = {
      controls: true, // 是否显示底部控制栏
      preload: 'auto', // 加载<video>标签后是否加载视频
      autoplay: 'muted', // 静音播放
      playbackRates: [0.5, 1, 1.5, 2], // 倍速播放
      width: '640',
      height: '247',
      controlBar: {
        // 自定义按钮的位置
        children: [
          {
            name: 'playToggle'
          },
          {
            name: 'progressControl'
          },
          {
            name: 'timeDivider'
          },
          {
            name: 'durationDisplay'
          },
          {
            name: 'volumePanel', // 音量调整方式横线条变为竖线条
            inline: false
          },
          {
            // 倍速播放
            name: 'playbackRateMenuButton',
            playbackRates: [0.5, 1, 1.5, 2, 2.5]
          },
          {
            name: 'pictureInPictureToggle' // 画中画播放模式
          },
          {
            name: 'fullscreenToggle'
          }
        ]
      }
    }
    this.player = this.$video(this.$refs.videoPlayer, options, function onPlayerReady() {
      console.log('onPlayerReady', this)
    })
  },
  beforeDestroy() {
    if (this.player) {
      this.player.dispose()
    }
  },
  methods: {
    saveTimes() {
      console.warn(11111)
    },
    vidPlay() {
      console.warn(2222)
    },
    endSave() {
      console.warn(3333)
    },
    finishCourse() {
      console.warn(44444)
    },
    videoMenu() {
      console.warn(55555)
    },
    seeking() {
      console.warn(66666)
    }
  }
}
</script>

<style scoped>
.video_box {
  margin: 10px;
  width: 99%;
  height: 450px;
}
.video-js {
  width: 100%;
  height: 450px;
}
</style>

